<template>
  <div class="product-management">
    <!-- 页面头部导航区 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>CRM系统</el-breadcrumb-item>
            <el-breadcrumb-item>线路产品管理</el-breadcrumb-item>
            <el-breadcrumb-item>产品列表</el-breadcrumb-item>
          </el-breadcrumb>
          <h1>线路产品管理</h1>
          <p>管理旅游线路产品的完整信息，包括产品创建、价格管理、库存控制等</p>
        </div>
        <div class="header-actions">
          <el-button type="default" :icon="Download" @click="exportData">
            数据导出
          </el-button>
          <el-button type="default" :icon="Upload" @click="importData">
            批量导入
          </el-button>
          <el-button type="primary" :icon="Plus" @click="createProduct">
            新建产品
          </el-button>
          <el-button type="default" :icon="Setting" @click="showSettings">
            设置
          </el-button>
        </div>
      </div>
    </div>

    <!-- 产品数据概览统计面板 -->
    <div class="statistics-section">
      <div class="stat-cards">
        <div class="stat-card on-sale-products">
          <div class="stat-icon">🛍️</div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.onSaleProducts }}</div>
            <div class="stat-trend">
              <span class="trend-value" :class="salesTrendClass">
                {{ salesTrendText }}
              </span>
              <span class="trend-text">较上月{{ statistics.salesGrowth >= 0 ? '增长' : '减少' }}{{ Math.abs(statistics.salesGrowth) }}%</span>
            </div>
            <div class="stat-label">在售产品数</div>
          </div>
        </div>

        <div class="stat-card inventory-warnings">
          <div class="stat-icon">⚠️</div>
          <div class="stat-content">
            <div class="stat-number warning-number">{{ statistics.inventoryWarnings }}</div>
            <div class="stat-status">
              <el-tag v-if="statistics.inventoryWarnings > 0" type="warning" size="small">
                需要关注
              </el-tag>
              <el-tag v-else type="success" size="small">
                库存正常
              </el-tag>
            </div>
            <div class="stat-label">库存预警数</div>
          </div>
        </div>

        <div class="stat-card month-sales">
          <div class="stat-icon">📈</div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.monthSales }}</div>
            <div class="stat-trend">
              <span class="trend-value positive">+{{ statistics.salesGrowth }}%</span>
              <span class="trend-text">同比增长</span>
            </div>
            <div class="stat-label">本月销量</div>
          </div>
        </div>

        <div class="stat-card avg-price">
          <div class="stat-icon">💰</div>
          <div class="stat-content">
            <div class="stat-number">¥{{ formatPrice(statistics.avgPrice) }}</div>
            <div class="stat-trend">
              <span class="trend-value" :class="priceTrendClass">
                {{ priceTrendText }}
              </span>
              <span class="trend-text">价格趋势</span>
            </div>
            <div class="stat-label">平均价格</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索筛选控制区 -->
    <div class="search-filter-section">
      <!-- 搜索框和快速筛选 -->
      <div class="search-row">
        <div class="search-input">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索产品名称、产品编号或目的地"
            :prefix-icon="Search"
            @input="handleSearch"
            @keyup.enter="executeSearch"
            clearable
            class="search-field"
          >
            <template #append>
              <el-button :icon="Search" @click="executeSearch" />
            </template>
          </el-input>
          <el-popover
            v-if="searchSuggestions.length > 0"
            v-model:visible="showSuggestions"
            placement="bottom-start"
            :width="300"
            trigger="manual"
          >
            <template #reference>
              <div></div>
            </template>
            <div class="search-suggestions">
              <div
                v-for="suggestion in searchSuggestions"
                :key="suggestion"
                class="suggestion-item"
                @click="selectSuggestion(suggestion)"
              >
                {{ suggestion }}
              </div>
            </div>
          </el-popover>
        </div>
        
        <!-- 快速筛选标签 -->
        <div class="quick-filters">
          <el-tag
            v-for="filter in quickFilters"
            :key="filter.key"
            :type="filter.active ? 'primary' : 'info'"
            :effect="filter.active ? 'dark' : 'plain'"
            @click="toggleQuickFilter(filter)"
            class="quick-filter-tag"
          >
            {{ filter.label }}
          </el-tag>
        </div>
      </div>

      <!-- 详细筛选条件 -->
      <div class="filter-row">
        <el-row :gutter="16">
          <el-col :xs="24" :sm="12" :md="6" :lg="4">
            <el-select v-model="filters.status" placeholder="产品状态" clearable @change="handleFilterChange">
              <el-option label="正常销售" value="正常销售" />
              <el-option label="暂停销售" value="暂停销售" />
              <el-option label="即将上线" value="即将上线" />
              <el-option label="已下架" value="已下架" />
              <el-option label="季节性暂停" value="季节性暂停" />
            </el-select>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="6" :lg="4">
            <el-cascader
              v-model="filters.category"
              placeholder="产品分类"
              :options="categoryOptions"
              :props="{ expandTrigger: 'hover' }"
              @change="handleFilterChange"
              clearable
            />
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="6" :lg="4">
            <el-select v-model="filters.inventoryStatus" placeholder="库存状态" clearable @change="handleFilterChange">
              <el-option label="充足" value="充足" />
              <el-option label="紧张" value="紧张" />
              <el-option label="不足" value="不足" />
              <el-option label="售罄" value="售罄" />
            </el-select>
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="6" :lg="4">
            <el-input-number
              v-model="filters.priceMin"
              placeholder="最低价格"
              :min="0"
              :controls="false"
              @change="handleFilterChange"
              class="price-input"
            />
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="6" :lg="4">
            <el-input-number
              v-model="filters.priceMax"
              placeholder="最高价格"
              :min="0"
              :controls="false"
              @change="handleFilterChange"
              class="price-input"
            />
          </el-col>
          
          <el-col :xs="24" :sm="12" :md="6" :lg="4">
            <el-select
              v-model="filters.tags"
              placeholder="产品标签"
              multiple
              collapse-tags
              collapse-tags-tooltip
              @change="handleFilterChange"
              clearable
            >
              <el-option
                v-for="tag in availableTags"
                :key="tag"
                :label="tag"
                :value="tag"
              />
            </el-select>
          </el-col>
        </el-row>
        
        <!-- 活动筛选条件显示 -->
        <div v-if="activeFilters.length > 0" class="active-filters">
          <span class="filter-label">已应用筛选：</span>
          <el-tag
            v-for="filter in activeFilters"
            :key="filter.key"
            :closable="true"
            @close="removeFilter(filter.key)"
            class="active-filter-tag"
          >
            {{ filter.label }}：{{ filter.value }}
          </el-tag>
          <el-button type="text" @click="clearAllFilters" class="clear-all-btn">
            清空筛选
          </el-button>
        </div>
      </div>
    </div>

    <!-- 批量操作工具栏 -->
    <div class="batch-toolbar" :class="{ 'active': selectedProducts.length > 0 }">
      <div class="batch-info">
        <span class="selected-count">已选择 {{ selectedProducts.length }} 个产品</span>
      </div>
      <div class="batch-actions">
        <el-button
          :disabled="selectedProducts.length === 0"
          @click="batchUpdateStatus"
        >
          批量状态管理
        </el-button>
        <el-button
          :disabled="selectedProducts.length === 0"
          @click="batchUpdatePrice"
        >
          批量调价
        </el-button>
        <el-button
          :disabled="selectedProducts.length === 0"
          @click="batchUpdateCategory"
        >
          批量分类
        </el-button>
        <el-button
          :disabled="selectedProducts.length === 0"
          @click="batchExport"
        >
          导出选中
        </el-button>
        <el-button
          :disabled="selectedProducts.length === 0"
          @click="batchCopy"
        >
          批量复制
        </el-button>
        <el-button
          type="danger"
          :disabled="selectedProducts.length === 0"
          @click="batchDelete"
        >
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 产品列表主体区域 -->
    <div class="product-list-section">
      <el-table
        ref="productTableRef"
        v-loading="loading"
        :data="productList"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        class="product-table"
        row-key="id"
        empty-text="暂无产品数据"
      >
        <!-- 选择列 -->
        <el-table-column type="selection" width="55" :reserve-selection="true" />
        
        <!-- 产品信息列 -->
        <el-table-column label="产品信息" min-width="300" class-name="product-info-col">
          <template #default="{ row }">
            <div class="product-info">
              <div class="product-image">
                <el-image
                  :src="row.mainImage || '/default-product.jpg'"
                  :alt="row.name"
                  fit="cover"
                  class="product-thumb"
                  @click="previewProduct(row)"
                >
                  <template #error>
                    <div class="image-error">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="product-details">
                <div class="product-title" @click="viewProductDetail(row)">
                  {{ row.name }}
                </div>
                <div v-if="row.subtitle" class="product-subtitle">
                  {{ row.subtitle }}
                </div>
                <div class="product-meta">
                  <span class="product-code">{{ row.productCode }}</span>
                  <span class="product-category">
                    <el-icon><Location /></el-icon>
                    {{ row.category.primary }} · {{ row.category.secondary }}
                  </span>
                  <span class="product-duration">
                    <el-icon><Clock /></el-icon>
                    {{ row.duration }}天
                  </span>
                </div>
                <div v-if="row.tags.length > 0" class="product-tags">
                  <el-tag
                    v-for="tag in row.tags.slice(0, 3)"
                    :key="tag"
                    size="small"
                    class="product-tag"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-popover
                    v-if="row.tags.length > 3"
                    placement="top"
                    trigger="hover"
                  >
                    <template #reference>
                      <el-tag size="small" class="more-tags">+{{ row.tags.length - 3 }}</el-tag>
                    </template>
                    <div class="all-tags">
                      <el-tag
                        v-for="tag in row.tags.slice(3)"
                        :key="tag"
                        size="small"
                        class="tag-item"
                      >
                        {{ tag }}
                      </el-tag>
                    </div>
                  </el-popover>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 价格状态列 -->
        <el-table-column label="价格状态" width="150" sortable="custom" prop="pricing.adult">
          <template #default="{ row }">
            <div class="price-info">
              <div class="current-price">¥{{ formatPrice(row.pricing.adult) }}</div>
              <div v-if="row.pricing.member" class="member-price">
                会员价 ¥{{ formatPrice(row.pricing.member) }}
              </div>
              <div class="price-trend">
                <el-icon v-if="row.priceChange > 0" class="trend-up"><CaretTop /></el-icon>
                <el-icon v-else-if="row.priceChange < 0" class="trend-down"><CaretBottom /></el-icon>
                <el-icon v-else class="trend-stable"><Minus /></el-icon>
                <span class="trend-text">{{ getPriceTrendText(row.priceChange) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 库存状态列 -->
        <el-table-column label="库存状态" width="120">
          <template #default="{ row }">
            <div class="inventory-info">
              <div class="inventory-number">{{ row.inventory.availableStock }}</div>
              <el-tag
                :type="getInventoryTagType(row.inventoryStatus)"
                size="small"
                class="inventory-status"
              >
                {{ row.inventoryStatus }}
              </el-tag>
              <div class="group-info">
                最少{{ row.inventory.minGroup }}人成团
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 销售状态列 -->
        <el-table-column label="销售状态" width="150">
          <template #default="{ row }">
            <div class="sales-info">
              <el-tag
                :type="getStatusTagType(row.status)"
                class="status-tag"
              >
                {{ row.status }}
              </el-tag>
              <div class="sales-data">
                <div class="sales-count">
                  本月{{ row.salesData.monthSales }}人 / 总计{{ row.salesData.totalSales }}人
                </div>
                <div class="rating">
                  <el-rate
                    v-model="row.salesData.avgRating"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                    size="small"
                  />
                </div>
              </div>
              <div class="last-updated">
                {{ formatDate(row.updatedAt) }}
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 操作菜单列 -->
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="primary" link @click="editProduct(row)">
                编辑
              </el-button>
              <el-button type="info" link @click="previewProduct(row)">
                预览
              </el-button>
              <el-button type="warning" link @click="copyProduct(row)">
                复制
              </el-button>
              
              <el-dropdown @command="handleActionCommand" class="more-actions">
                <el-button type="info" link>
                  更多<el-icon><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{ action: 'pricing', row }">价格管理</el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'inventory', row }">库存管理</el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'itinerary', row }">行程编辑</el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'materials', row }">资料管理</el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'analytics', row }">销售分析</el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'delete', row }" divided>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              
              <!-- 状态切换开关 -->
              <div class="status-switch">
                <el-switch
                  :model-value="row.status === '正常销售'"
                  @change="toggleProductStatus(row, $event)"
                  active-text="上架"
                  inactive-text="下架"
                  size="small"
                />
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页控制器 + 显示设置 -->
    <div class="pagination-section">
      <div class="pagination-info">
        <span>共 {{ pagination.total }} 条记录，共 {{ Math.ceil(pagination.total / pagination.pageSize) }} 页</span>
        <el-select v-model="pagination.pageSize" @change="handlePageSizeChange" class="page-size-select">
          <el-option label="10条/页" :value="10" />
          <el-option label="20条/页" :value="20" />
          <el-option label="50条/页" :value="50" />
          <el-option label="100条/页" :value="100" />
        </el-select>
      </div>
      
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="prev, pager, next, jumper"
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange"
        class="pagination-controls"
      />
      
      <div class="display-settings">
        <el-button-group>
          <el-button
            :type="viewMode === 'table' ? 'primary' : 'default'"
            @click="viewMode = 'table'"
            :icon="List"
            size="small"
          />
          <el-button
            :type="viewMode === 'card' ? 'primary' : 'default'"
            @click="viewMode = 'card'"
            :icon="Grid"
            size="small"
          />
        </el-button-group>
        
        <el-dropdown @command="handleDensityChange" class="density-control">
          <el-button size="small">
            密度<el-icon><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="compact">紧凑</el-dropdown-item>
              <el-dropdown-item command="default">标准</el-dropdown-item>
              <el-dropdown-item command="loose">宽松</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        
        <el-button size="small" :icon="Refresh" @click="refreshData">
          刷新
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Download, Upload, Setting, Search, Picture, Location, Clock,
  CaretTop, CaretBottom, Minus, ArrowDown, List, Grid, Refresh
} from '@element-plus/icons-vue'
import {
  getProductList,
  getProductStatistics,
  getSearchSuggestions,
  getProductCategories,
  getProductTags,
  updateProductStatus,
  batchOperateProducts,
  copyProduct as copyProductApi,
  type Product,
  type ProductListQuery,
  type ProductStatistics,
  type ProductStatus
} from '@/api/product'
import { get } from '@/utils/request'

// ==========================================
// 响应式数据定义
// ==========================================

const loading = ref(false)
const productList = ref<Product[]>([])
const selectedProducts = ref<Product[]>([])
const searchKeyword = ref('')
const searchSuggestions = ref<string[]>([])
const showSuggestions = ref(false)

// 统计数据
const statistics = ref<ProductStatistics>({
  totalProducts: 0,
  onSaleProducts: 0,
  inventoryWarnings: 0,
  monthSales: 0,
  avgPrice: 0,
  priceGrowth: 0,
  salesGrowth: 0
})

// 筛选条件
const filters = reactive({
  status: '',
  category: [],
  inventoryStatus: '',
  priceMin: null,
  priceMax: null,
  tags: []
})

// 分页信息
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 排序信息
const sortInfo = reactive({
  sortBy: '',
  sortOrder: 'desc' as 'asc' | 'desc'
})

// 界面设置
const viewMode = ref<'table' | 'card'>('table')
const density = ref<'compact' | 'default' | 'loose'>('default')

// 选项数据
const categoryOptions = ref([])
const availableTags = ref<string[]>([])

// 快速筛选
const quickFilters = ref([
  { key: 'onSale', label: '在售产品', active: false },
  { key: 'warning', label: '库存预警', active: false },
  { key: 'newProduct', label: '新品上线', active: false },
  { key: 'popular', label: '热门产品', active: false }
])

// ==========================================
// 计算属性
// ==========================================

const salesTrendClass = computed(() => {
  return statistics.value.salesGrowth >= 0 ? 'positive' : 'negative'
})

const salesTrendText = computed(() => {
  const growth = statistics.value.salesGrowth
  return growth >= 0 ? `+${growth}%` : `${growth}%`
})

const priceTrendClass = computed(() => {
  return statistics.value.priceGrowth >= 0 ? 'positive' : 'negative'
})

const priceTrendText = computed(() => {
  const growth = statistics.value.priceGrowth
  return growth >= 0 ? `+${growth}%` : `${growth}%`
})

const activeFilters = computed(() => {
  const active = []
  if (filters.status) active.push({ key: 'status', label: '状态', value: filters.status })
  if (filters.category.length > 0) active.push({ key: 'category', label: '分类', value: filters.category.join(' / ') })
  if (filters.inventoryStatus) active.push({ key: 'inventoryStatus', label: '库存', value: filters.inventoryStatus })
  if (filters.priceMin) active.push({ key: 'priceMin', label: '最低价', value: `¥${filters.priceMin}` })
  if (filters.priceMax) active.push({ key: 'priceMax', label: '最高价', value: `¥${filters.priceMax}` })
  if (filters.tags.length > 0) active.push({ key: 'tags', label: '标签', value: filters.tags.join(', ') })
  return active
})

// ==========================================
// 方法定义
// ==========================================

/**
 * 加载产品列表数据
 */
const loadProductList = async () => {
  loading.value = true
  try {
    const params: ProductListQuery = {
      page: pagination.page,
      pageSize: pagination.pageSize,
      keyword: searchKeyword.value,
      ...filters,
      ...sortInfo
    }
    
    console.log('[DEBUG] Loading product list with params:', params)
    const response = await getProductList(params)
    console.log('[DEBUG] Product list response:', response)
    
    if (response.success) {
      productList.value = response.data.items
      pagination.total = response.data.total
    } else {
      console.error('[DEBUG] Product list request failed:', response)
    }
  } catch (error) {
    ElMessage.error('加载产品列表失败')
    console.error('Load product list error:', error)
  } finally {
    loading.value = false
  }
}

/**
 * 加载统计数据
 */
const loadStatistics = async () => {
  try {
    const response = await getProductStatistics()
    if (response.success) {
      statistics.value = response.data
    }
  } catch (error) {
    console.error('Load statistics error:', error)
  }
}

/**
 * 加载选项数据
 */
const loadOptions = async () => {
  try {
    console.log('[DEBUG] Loading options...')
    const [categoriesRes, tagsRes] = await Promise.all([
      getProductCategories(),
      getProductTags()
    ])
    
    console.log('[DEBUG] Categories response:', categoriesRes)
    console.log('[DEBUG] Tags response:', tagsRes)
    
    if (categoriesRes.success) {
      categoryOptions.value = categoriesRes.data
    }
    
    if (tagsRes.success) {
      availableTags.value = tagsRes.data
    }
  } catch (error) {
    console.error('Load options error:', error)
  }
}

/**
 * 处理搜索输入
 */
const handleSearch = async (value: string) => {
  if (value.length > 1) {
    try {
      const response = await getSearchSuggestions(value)
      if (response.success) {
        searchSuggestions.value = response.data
        showSuggestions.value = true
      }
    } catch (error) {
      console.error('Search suggestions error:', error)
    }
  } else {
    showSuggestions.value = false
  }
}

/**
 * 执行搜索
 */
const executeSearch = () => {
  showSuggestions.value = false
  pagination.page = 1
  loadProductList()
}

/**
 * 选择搜索建议
 */
const selectSuggestion = (suggestion: string) => {
  searchKeyword.value = suggestion
  showSuggestions.value = false
  executeSearch()
}

/**
 * 切换快速筛选
 */
const toggleQuickFilter = (filter: any) => {
  filter.active = !filter.active
  // 根据快速筛选更新实际筛选条件
  applyQuickFilters()
}

/**
 * 应用快速筛选
 */
const applyQuickFilters = () => {
  const activeQuickFilters = quickFilters.value.filter(f => f.active)
  
  // 重置筛选条件
  if (activeQuickFilters.length === 0) {
    Object.assign(filters, {
      status: '',
      category: [],
      inventoryStatus: '',
      priceMin: null,
      priceMax: null,
      tags: []
    })
  } else {
    // 应用快速筛选逻辑
    activeQuickFilters.forEach(filter => {
      switch (filter.key) {
        case 'onSale':
          filters.status = '正常销售'
          break
        case 'warning':
          filters.inventoryStatus = '不足'
          break
        // 可以添加更多快速筛选逻辑
      }
    })
  }
  
  handleFilterChange()
}

/**
 * 处理筛选条件变化
 */
const handleFilterChange = () => {
  pagination.page = 1
  loadProductList()
}

/**
 * 移除单个筛选条件
 */
const removeFilter = (key: string) => {
  switch (key) {
    case 'status':
      filters.status = ''
      break
    case 'category':
      filters.category = []
      break
    case 'inventoryStatus':
      filters.inventoryStatus = ''
      break
    case 'priceMin':
      filters.priceMin = null
      break
    case 'priceMax':
      filters.priceMax = null
      break
    case 'tags':
      filters.tags = []
      break
  }
  handleFilterChange()
}

/**
 * 清空所有筛选条件
 */
const clearAllFilters = () => {
  Object.assign(filters, {
    status: '',
    category: [],
    inventoryStatus: '',
    priceMin: null,
    priceMax: null,
    tags: []
  })
  quickFilters.value.forEach(filter => {
    filter.active = false
  })
  handleFilterChange()
}

/**
 * 处理表格选择变化
 */
const handleSelectionChange = (selection: Product[]) => {
  selectedProducts.value = selection
}

/**
 * 处理排序变化
 */
const handleSortChange = ({ prop, order }: any) => {
  sortInfo.sortBy = prop
  sortInfo.sortOrder = order === 'ascending' ? 'asc' : 'desc'
  loadProductList()
}

/**
 * 处理分页变化
 */
const handlePageChange = (page: number) => {
  pagination.page = page
  loadProductList()
}

/**
 * 处理页面大小变化
 */
const handlePageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize
  pagination.page = 1
  loadProductList()
}

/**
 * 切换产品状态
 */
const toggleProductStatus = async (product: Product, isOnSale: boolean) => {
  const newStatus: ProductStatus = isOnSale ? '正常销售' : '已下架'
  
  try {
    const response = await updateProductStatus(product.id, newStatus)
    if (response.success) {
      product.status = newStatus
      ElMessage.success(`产品${isOnSale ? '上架' : '下架'}成功`)
      loadStatistics() // 刷新统计数据
    }
  } catch (error) {
    ElMessage.error('状态更新失败')
    console.error('Update status error:', error)
  }
}

/**
 * 处理操作命令
 */
const handleActionCommand = ({ action, row }: { action: string, row: Product }) => {
  switch (action) {
    case 'pricing':
      // 跳转到价格管理页面
      break
    case 'inventory':
      // 跳转到库存管理页面
      break
    case 'itinerary':
      // 跳转到行程编辑页面
      break
    case 'materials':
      // 跳转到资料管理页面
      break
    case 'analytics':
      // 跳转到销售分析页面
      break
    case 'delete':
      handleDeleteProduct(row)
      break
  }
}

/**
 * 处理密度变化
 */
const handleDensityChange = (newDensity: string) => {
  density.value = newDensity as 'compact' | 'default' | 'loose'
  // 可以通过CSS类来改变表格密度
}

/**
 * 刷新数据
 */
const refreshData = () => {
  loadProductList()
  loadStatistics()
}

// ==========================================
// 操作方法
// ==========================================

/**
 * 创建产品
 */
const createProduct = () => {
  // 跳转到产品创建页面
  ElMessage.info('跳转到产品创建页面')
}

/**
 * 编辑产品
 */
const editProduct = (product: Product) => {
  // 跳转到产品编辑页面
  ElMessage.info(`编辑产品：${product.name}`)
}

/**
 * 预览产品
 */
const previewProduct = (product: Product) => {
  // 打开产品预览弹窗或跳转到预览页面
  ElMessage.info(`预览产品：${product.name}`)
}

/**
 * 查看产品详情
 */
const viewProductDetail = (product: Product) => {
  // 跳转到产品详情页面
  ElMessage.info(`查看产品详情：${product.name}`)
}

/**
 * 复制产品
 */
const copyProduct = async (product: Product) => {
  try {
    const { value: newName } = await ElMessageBox.prompt(
      '请输入新产品名称',
      '复制产品',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: `${product.name} - 副本`,
        inputPattern: /.+/,
        inputErrorMessage: '产品名称不能为空'
      }
    )
    
    const response = await copyProductApi(product.id, newName)
    if (response.success) {
      ElMessage.success('产品复制成功')
      loadProductList()
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('产品复制失败')
      console.error('Copy product error:', error)
    }
  }
}

/**
 * 删除产品
 */
const handleDeleteProduct = async (product: Product) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除产品 "${product.name}" 吗？此操作不可撤销！`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 这里调用删除API
    ElMessage.success('产品删除成功')
    loadProductList()
    loadStatistics()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('产品删除失败')
    }
  }
}

/**
 * 批量状态管理
 */
const batchUpdateStatus = () => {
  ElMessage.info('批量状态管理功能开发中...')
}

/**
 * 批量调价
 */
const batchUpdatePrice = () => {
  ElMessage.info('批量调价功能开发中...')
}

/**
 * 批量分类管理
 */
const batchUpdateCategory = () => {
  ElMessage.info('批量分类管理功能开发中...')
}

/**
 * 批量导出
 */
const batchExport = () => {
  ElMessage.info('批量导出功能开发中...')
}

/**
 * 批量复制
 */
const batchCopy = () => {
  ElMessage.info('批量复制功能开发中...')
}

/**
 * 批量删除
 */
const batchDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedProducts.value.length} 个产品吗？此操作不可撤销！`,
      '批量删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const ids = selectedProducts.value.map(p => p.id)
    const response = await batchOperateProducts({
      ids,
      operation: 'delete'
    })
    
    if (response.success) {
      ElMessage.success('批量删除成功')
      selectedProducts.value = []
      loadProductList()
      loadStatistics()
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除失败')
    }
  }
}

/**
 * 数据导出
 */
const exportData = () => {
  ElMessage.info('数据导出功能开发中...')
}

/**
 * 批量导入
 */
const importData = () => {
  ElMessage.info('批量导入功能开发中...')
}

/**
 * 显示设置
 */
const showSettings = () => {
  ElMessage.info('设置功能开发中...')
}

// ==========================================
// 工具方法
// ==========================================

/**
 * 格式化价格
 */
const formatPrice = (price: number): string => {
  return price.toLocaleString()
}

/**
 * 格式化日期
 */
const formatDate = (dateString: string): string => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days}天前`
  if (days < 30) return `${Math.floor(days / 7)}周前`
  
  return date.toLocaleDateString()
}

/**
 * 获取价格趋势文本
 */
const getPriceTrendText = (change: number): string => {
  if (change > 0) return `+${change}%`
  if (change < 0) return `${change}%`
  return '持平'
}

/**
 * 获取库存标签类型
 */
const getInventoryTagType = (status: string): string => {
  switch (status) {
    case '充足': return 'success'
    case '紧张': return 'warning'
    case '不足': return 'danger'
    case '售罄': return 'info'
    default: return 'info'
  }
}

/**
 * 获取状态标签类型
 */
const getStatusTagType = (status: string): string => {
  switch (status) {
    case '正常销售': return 'success'
    case '暂停销售': return 'warning'
    case '即将上线': return 'info'
    case '已下架': return 'info'
    case '季节性暂停': return 'warning'
    default: return 'info'
  }
}

// ==========================================
// 生命周期
// ==========================================

onMounted(async () => {
  // 先测试一个简单的API调用
  try {
    console.log('[DEBUG] 测试Mock API调用...')
    const testResponse = await get('/api/products/test')
    console.log('[DEBUG] 测试响应:', testResponse)
    
    if (testResponse && testResponse.code === 200) {
      console.log('[DEBUG] Mock API测试成功，开始加载数据...')
      loadProductList()
      loadStatistics()
      loadOptions()
    } else {
      console.error('[DEBUG] Mock API测试失败，跳过数据加载')
    }
  } catch (error) {
    console.error('[DEBUG] 测试API调用失败:', error)
    console.error('[DEBUG] 错误详情:', error.message, error.code)
    // 即使测试失败，也尝试加载数据
    try {
      loadProductList()
      loadStatistics()
      loadOptions()
    } catch (loadError) {
      console.error('[DEBUG] 数据加载也失败了:', loadError)
    }
  }
})

// 监听筛选条件变化
watch(() => [filters.status, filters.category, filters.inventoryStatus], () => {
  // 可以添加防抖处理
}, { deep: true })
</script>

<style lang="scss" scoped>
.product-management {
  padding: 0;
  
  // ==========================================
  // 页面头部导航区样式
  // ==========================================
  .page-header {
    background: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color-light);
    padding: 24px 24px 16px;
    margin-bottom: 24px;
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      max-width: 1440px;
      margin: 0 auto;
    }
    
    .header-left {
      flex: 1;
      
      .el-breadcrumb {
        margin-bottom: 12px;
        
        :deep(.el-breadcrumb__item) {
          font-size: 14px;
          
          .el-breadcrumb__inner {
            color: var(--el-text-color-regular);
            font-weight: 400;
          }
          
          &:last-child .el-breadcrumb__inner {
            color: var(--el-color-primary);
            font-weight: 500;
          }
        }
      }
      
      h1 {
        font-size: 28px;
        font-weight: 700;
        color: var(--el-text-color-primary);
        margin: 0 0 8px 0;
        line-height: 1.2;
      }
      
      p {
        font-size: 16px;
        color: var(--el-text-color-regular);
        margin: 0;
        line-height: 1.5;
      }
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
      
      .el-button {
        border-radius: 8px;
        font-weight: 500;
        padding: 10px 20px;
        
        &.el-button--primary {
          background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
          border: none;
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
          }
        }
      }
    }
  }
  
  // ==========================================
  // 统计面板样式
  // ==========================================
  .statistics-section {
    margin-bottom: 24px;
    padding: 0 24px;
    
    .stat-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      max-width: 1440px;
      margin: 0 auto;
    }
    
    .stat-card {
      background: var(--el-bg-color);
      border-radius: 12px;
      padding: 24px;
      border: 1px solid var(--el-border-color-lighter);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 20px;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        border-color: var(--el-color-primary-light-7);
      }
      
      .stat-icon {
        font-size: 36px;
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      
      .stat-content {
        flex: 1;
        min-width: 0;
      }
      
      .stat-number {
        font-size: 32px;
        font-weight: 700;
        color: var(--el-text-color-primary);
        line-height: 1;
        margin-bottom: 8px;
        
        &.warning-number {
          color: var(--el-color-warning);
        }
      }
      
      .stat-trend {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
        
        .trend-value {
          font-weight: 600;
          font-size: 14px;
          
          &.positive {
            color: var(--el-color-success);
          }
          
          &.negative {
            color: var(--el-color-danger);
          }
        }
        
        .trend-text {
          font-size: 13px;
          color: var(--el-text-color-regular);
        }
      }
      
      .stat-percentage {
        font-size: 14px;
        color: var(--el-text-color-regular);
        margin-bottom: 4px;
      }
      
      .stat-status {
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 14px;
        color: var(--el-text-color-secondary);
        font-weight: 500;
      }
      
      .health-chart {
        margin-bottom: 8px;
        
        .health-bar {
          height: 6px;
          border-radius: 3px;
          display: flex;
          overflow: hidden;
          background: var(--el-fill-color-light);
          
          .health-segment {
            height: 100%;
            
            &.good { background: var(--el-color-success); }
            &.normal { background: var(--el-color-primary); }
            &.poor { background: var(--el-color-warning); }
            &.bad { background: var(--el-color-danger); }
          }
        }
      }
      
      // 特定卡片的图标背景色
      &.on-sale-products .stat-icon {
        background: linear-gradient(135deg, var(--el-color-success) 0%, var(--el-color-success-light-3) 100%);
        color: white;
      }
      
      &.inventory-warnings .stat-icon {
        background: linear-gradient(135deg, var(--el-color-warning) 0%, var(--el-color-warning-light-3) 100%);
        color: white;
      }
      
      &.month-sales .stat-icon {
        background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
        color: white;
      }
      
      &.avg-price .stat-icon {
        background: linear-gradient(135deg, #ff6b6b 0%, #ffa8a8 100%);
        color: white;
      }
    }
  }
  
  // ==========================================
  // 搜索筛选区样式
  // ==========================================
  .search-filter-section {
    background: var(--el-bg-color);
    border-radius: 12px;
    padding: 24px;
    margin: 0 24px 24px;
    border: 1px solid var(--el-border-color-lighter);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    
    .search-row {
      display: flex;
      gap: 24px;
      align-items: flex-start;
      margin-bottom: 20px;
      
      .search-input {
        flex: 1;
        position: relative;
        
        .search-field {
          :deep(.el-input__wrapper) {
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            
            &:hover {
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            
            &.is-focus {
              box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
            }
          }
        }
      }
      
      .quick-filters {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
        
        .quick-filter-tag {
          cursor: pointer;
          border-radius: 20px;
          font-weight: 500;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
    
    .filter-row {
      .el-select,
      .el-cascader,
      .price-input {
        width: 100%;
        
        :deep(.el-input__wrapper) {
          border-radius: 8px;
        }
      }
      
      .active-filters {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--el-border-color-lighter);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        
        .filter-label {
          font-size: 14px;
          color: var(--el-text-color-regular);
          font-weight: 500;
          margin-right: 8px;
        }
        
        .active-filter-tag {
          border-radius: 6px;
          font-size: 13px;
        }
        
        .clear-all-btn {
          margin-left: 12px;
          color: var(--el-color-danger);
          
          &:hover {
            background: var(--el-color-danger-light-9);
          }
        }
      }
    }
  }
  
  // ==========================================
  // 批量操作工具栏样式
  // ==========================================
  .batch-toolbar {
    background: var(--el-bg-color);
    border: 1px solid var(--el-border-color-light);
    border-radius: 12px;
    padding: 16px 24px;
    margin: 0 24px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.5;
    pointer-events: none;
    transition: all 0.3s ease;
    transform: translateY(-10px);
    
    &.active {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
      border-color: var(--el-color-primary-light-7);
      background: linear-gradient(135deg, var(--el-color-primary-light-9) 0%, var(--el-bg-color) 100%);
    }
    
    .batch-info {
      .selected-count {
        font-weight: 600;
        color: var(--el-color-primary);
        font-size: 15px;
      }
    }
    
    .batch-actions {
      display: flex;
      gap: 12px;
      
      .el-button {
        border-radius: 8px;
        font-weight: 500;
        
        &.el-button--danger {
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
          }
        }
      }
    }
  }
  
  // ==========================================
  // 产品列表表格样式
  // ==========================================
  .product-list-section {
    margin: 0 24px 24px;
    
    .product-table {
      background: var(--el-bg-color);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      border: 1px solid var(--el-border-color-lighter);
      
      :deep(.el-table__header) {
        background: var(--el-fill-color-extra-light);
        
        th {
          background: transparent;
          font-weight: 600;
          color: var(--el-text-color-primary);
          font-size: 14px;
          border-bottom: 2px solid var(--el-border-color-light);
        }
      }
      
      :deep(.el-table__body) {
        tr {
          transition: all 0.3s ease;
          
          &:hover {
            background: var(--el-fill-color-extra-light);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
          }
          
          td {
            border-bottom: 1px solid var(--el-border-color-lighter);
            padding: 16px 12px;
          }
        }
      }
      
      // 产品信息列样式
      .product-info {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        
        .product-image {
          .product-thumb {
            width: 80px;
            height: 60px;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease;
            
            &:hover {
              transform: scale(1.05);
            }
            
            .image-error {
              width: 100%;
              height: 100%;
              background: var(--el-fill-color-light);
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: var(--el-text-color-placeholder);
            }
          }
        }
        
        .product-details {
          flex: 1;
          min-width: 0;
        }
        
        .product-title {
          font-size: 16px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          margin-bottom: 4px;
          cursor: pointer;
          line-height: 1.4;
          
          &:hover {
            color: var(--el-color-primary);
          }
        }
        
        .product-subtitle {
          font-size: 14px;
          color: var(--el-text-color-regular);
          margin-bottom: 6px;
          line-height: 1.3;
        }
        
        .product-meta {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 8px;
          font-size: 13px;
          color: var(--el-text-color-secondary);
          
          .product-code {
            background: var(--el-fill-color-light);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Monaco', 'Menlo', monospace;
          }
          
          .product-category,
          .product-duration {
            display: flex;
            align-items: center;
            gap: 4px;
            
            .el-icon {
              font-size: 12px;
            }
          }
        }
        
        .product-tags {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;
          
          .product-tag,
          .more-tags {
            font-size: 12px;
            height: 22px;
            line-height: 20px;
            border-radius: 4px;
          }
          
          .more-tags {
            background: var(--el-color-info-light-8);
            color: var(--el-color-info);
            cursor: pointer;
          }
        }
      }
      
      // 价格状态列样式
      .price-info {
        text-align: right;
        
        .current-price {
          font-size: 18px;
          font-weight: 700;
          color: var(--el-color-danger);
          margin-bottom: 4px;
        }
        
        .member-price {
          font-size: 13px;
          color: var(--el-color-warning);
          margin-bottom: 6px;
        }
        
        .price-trend {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 4px;
          font-size: 12px;
          
          .el-icon {
            font-size: 14px;
            
            &.trend-up {
              color: var(--el-color-success);
            }
            
            &.trend-down {
              color: var(--el-color-danger);
            }
            
            &.trend-stable {
              color: var(--el-text-color-placeholder);
            }
          }
          
          .trend-text {
            color: var(--el-text-color-secondary);
          }
        }
      }
      
      // 库存状态列样式
      .inventory-info {
        text-align: center;
        
        .inventory-number {
          font-size: 16px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          margin-bottom: 6px;
        }
        
        .inventory-status {
          margin-bottom: 6px;
        }
        
        .group-info {
          font-size: 12px;
          color: var(--el-text-color-secondary);
          line-height: 1.3;
        }
      }
      
      // 销售状态列样式
      .sales-info {
        .status-tag {
          margin-bottom: 8px;
        }
        
        .sales-data {
          margin-bottom: 8px;
          
          .sales-count {
            font-size: 13px;
            color: var(--el-text-color-regular);
            margin-bottom: 6px;
            line-height: 1.3;
          }
          
          .rating {
            :deep(.el-rate) {
              height: 16px;
              
              .el-rate__item {
                font-size: 14px;
              }
              
              .el-rate__text {
                font-size: 12px;
                margin-left: 4px;
              }
            }
          }
        }
        
        .last-updated {
          font-size: 12px;
          color: var(--el-text-color-placeholder);
        }
      }
      
      // 操作列样式
      .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        
        .el-button {
          padding: 4px 8px;
          font-size: 13px;
          border-radius: 6px;
          
          &.el-button--text {
            &:hover {
              background: var(--el-color-primary-light-9);
            }
          }
        }
        
        .more-actions {
          .el-button {
            padding: 4px 8px;
          }
        }
        
        .status-switch {
          margin-top: 8px;
          
          :deep(.el-switch) {
            .el-switch__label {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  
  // ==========================================
  // 分页控制器样式
  // ==========================================
  .pagination-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--el-bg-color);
    border-radius: 12px;
    padding: 16px 24px;
    margin: 0 24px;
    border: 1px solid var(--el-border-color-lighter);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    
    .pagination-info {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 14px;
      color: var(--el-text-color-regular);
      
      .page-size-select {
        width: 120px;
      }
    }
    
    .pagination-controls {
      :deep(.el-pagination) {
        .el-pager li {
          border-radius: 6px;
          margin: 0 2px;
          
          &.is-active {
            background: var(--el-color-primary);
            color: white;
          }
        }
        
        .btn-prev,
        .btn-next {
          border-radius: 6px;
        }
      }
    }
    
    .display-settings {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .el-button-group {
        .el-button {
          border-radius: 6px;
          
          &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
          
          &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }
      }
      
      .density-control,
      .el-button {
        border-radius: 6px;
      }
    }
  }
  
  // ==========================================
  // 搜索建议样式
  // ==========================================
  .search-suggestions {
    .suggestion-item {
      padding: 8px 12px;
      cursor: pointer;
      border-radius: 6px;
      font-size: 14px;
      color: var(--el-text-color-regular);
      transition: all 0.2s ease;
      
      &:hover {
        background: var(--el-fill-color-light);
        color: var(--el-color-primary);
      }
    }
  }
  
  // 弹出层中的标签样式
  .all-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    
    .tag-item {
      font-size: 12px;
      margin: 0;
    }
  }
  
  // ==========================================
  // 响应式设计
  // ==========================================
  
  // 平板端适配
  @media (max-width: 1199px) {
    .page-header {
      .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
      }
      
      .header-actions {
        justify-content: flex-end;
      }
    }
    
    .statistics-section .stat-cards {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    
    .search-filter-section .search-row {
      flex-direction: column;
      gap: 16px;
    }
  }
  
  // 移动端适配
  @media (max-width: 767px) {
    padding: 0 12px;
    
    .page-header {
      padding: 16px 12px 12px;
      margin-bottom: 16px;
      
      .header-left {
        h1 {
          font-size: 22px;
        }
        
        p {
          font-size: 14px;
        }
      }
      
      .header-actions {
        flex-wrap: wrap;
        gap: 8px;
        
        .el-button {
          padding: 8px 16px;
          font-size: 13px;
        }
      }
    }
    
    .statistics-section {
      padding: 0 12px;
      
      .stat-cards {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      
      .stat-card {
        padding: 16px;
        
        .stat-icon {
          font-size: 28px;
          width: 48px;
          height: 48px;
        }
        
        .stat-number {
          font-size: 24px;
        }
      }
    }
    
    .search-filter-section,
    .batch-toolbar,
    .product-list-section,
    .pagination-section {
      margin-left: 12px;
      margin-right: 12px;
    }
    
    .search-filter-section {
      padding: 16px;
      
      .filter-row {
        .el-col {
          margin-bottom: 12px;
        }
      }
    }
    
    .batch-toolbar {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
      
      .batch-actions {
        justify-content: center;
        flex-wrap: wrap;
      }
    }
    
    .product-table {
      // 移动端可以考虑转换为卡片布局
      // 这里保持表格布局，但优化显示
      :deep(.el-table__body) {
        tr td {
          padding: 12px 8px;
        }
      }
      
      .product-info {
        gap: 12px;
        
        .product-image .product-thumb {
          width: 60px;
          height: 45px;
        }
        
        .product-title {
          font-size: 14px;
        }
        
        .product-meta {
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
        }
      }
      
      .action-buttons {
        gap: 6px;
        
        .el-button {
          padding: 2px 6px;
          font-size: 12px;
        }
      }
    }
    
    .pagination-section {
      flex-direction: column;
      gap: 16px;
      padding: 16px 12px;
      
      .pagination-info {
        flex-direction: column;
        gap: 8px;
        text-align: center;
      }
      
      .display-settings {
        flex-wrap: wrap;
        justify-content: center;
      }
    }
  }
}
</style>